<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 18:18:46
-->
<template>
    <div ref="right1_container" style="height:95%"></div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
export default {
    data() {
        return {
            dataArr: [{ year: '1991', value: 3, count: 10 },
                { year: '1992', value: 4, count: 4 },
                { year: '1993', value: 3.5, count: 5 },
                { year: '1994', value: 5, count: 5 },
                { year: '1995', value: 4.9, count: 4.9 },
                
                { year: '1996', value: 6, count: 35 }]
        }
    },
    mounted() {
      this.initChart()
    },
    methods: {
        initChart() {
            const dualAxes = new DualAxes(this.$refs.right1_container, {
                data: [this.dataArr,this.dataArr],
                xField: 'year',
                yField: ['value', 'count'],
                geometryOptions: [{
                        geometry: 'line',
                        color: '#5B8FF9',
                    },
                    {
                        geometry: 'line',
                        color: '#5AD8A6',
                    }]
            })
            dualAxes.render()
        }
    }
}
</script>

<style scoped>

</style>